<template>
  <div>
    <div class="top">
      <input v-model="inputContent" @input="input" type="text" placeholder="搜索歌手、歌曲、专辑" />
      <span class="iconfont iconfontOne">&#xe606;</span>
      <div @click="clearInput">
        <span v-show="showCancel" class="iconfont iconfontTwo">&#xe60f;</span>
      </div>
    </div>
    <div v-show="showNewList">
      <div v-show="!showList" class="bottom">
        <div class="hotSearch">热门搜索</div>
        <ul class="ul">
          <li
            @click="clickTag(index)"
            v-for="(item, index) of hots"
            :key="index"
            class="li"
          >{{item.first}}</li>
        </ul>
      </div>
      <div v-show="showList" class="list">
        <p @click="searcMoreList">搜索“{{inputContent}}”</p>
        <ul>
          <li @click="searcMoreLists(index)" v-for="(item, index) of allMatch" :key="index">
            <span class="iconfont iconfontThree">&#xe606;</span>
            <span class="content">{{item.keyword}}</span>
          </li>
        </ul>
      </div>
    </div>
    <SerachListDetail v-show="!showNewList" />
  </div>
</template>

<script>
import SerachListDetail from "./list";
import { SearchList, SearchAdvice, SerachDetail } from "../../../../api/search";
export default {
  name: "Search",
  data() {
    return {
      showCancel: false,
      inputContent: "",
      hots: [],
      showList: false,
      // 搜索提示的简单列表
      allMatch: [],
      //显示搜索的详细信息
      showNewList: true
    };
  },
  mounted() {
    this.searchList();
  },
  methods: {
    searchList() {
      SearchList().then(res => {
        let {
          data: {
            result: { hots }
          }
        } = res;
        this.hots = hots;
      });
    },
    input() {
      this.showList = true;
      this.inputContent
        ? this.recommendList()
        : this.inputIsNull();
    },
    // input事件去查推荐搜索列表
    recommendList() {
      this.showCancel = true;
      SearchAdvice(this.inputContent, "mobile").then(res => {
        let {
          data: {
            result: { allMatch }
          }
        } = res;
        this.allMatch = allMatch;
      });
    },
    // 监听input为空的时候做的事
    inputIsNull() {
      this.showCancel = false
      this.showList = false
      this.showNewList = true
    },
    clearInput() {
      this.inputContent = "";
      this.showList = false;
      this.showNewList = true
    },
    // 点击列表查询列表的更多信息
    searcMoreList() {
      this.searchListP(this.inputContent);
    },
    searcMoreLists(index) {
      this.searchListP(this.allMatch[index].keyword);
    },
    searchListP(keywords) {
      SerachDetail(keywords).then(res => {
        let {
          data: { result }
        } = res;
        this.$store.commit("searchList/SEARCH_RESULT", result);
      });
      this.showNewList = false
    },
    // 点击标签进行搜索
    clickTag(index) {
      this.inputContent = this.hots[index].first;
      this.searcMoreList();
    }
  },
  components: {
    SerachListDetail
  }
};
</script>

<style lang="scss" scoped>
@import "./src/common/scss/variable.scss";
@import "./src/common/scss/mixin.scss";
.top {
  @include display-r-center;
  height: 200px;
  position: relative;
  border-bottom: 1px solid #ccc;
  input {
    width: 75%;
    border-radius: 50px;
    background: #eee;
    padding: 3px 80px;
    height: 80px;
    color: $color-gray;
  }
  .iconfontOne {
    position: absolute;
    top: 74px;
    left: 65px;
    font-size: 50px;
  }
  .iconfontTwo {
    position: absolute;
    top: 74px;
    right: 65px;
    font-size: 50px;
    color: $color-gray;
  }
}
.bottom {
  padding: 50px 0 0 30px;
  .hotSearch {
    color: $color-gray;
    font-size: 34px;
    margin-bottom: 30px;
  }
  .ul {
    @include display-r;
    flex-wrap: wrap;
    width: 95%;
    .li {
      padding: 25px 35px;
      border-radius: 45px;
      color: #555;
      font-size: 36px;
      border: 1px solid #ccc;
      margin-right: 20px;
      margin-bottom: 20px;
    }
  }
}
.list {
  @include display-c;
  p {
    padding: 45px 45px 45px 25px;
    color: #507daf;
    font-size: 40px;
    height: 30px;
    border-bottom: 1px solid #ddd;
  }
  ul {
    @include display-c;
    li {
      @include display-r;
      align-items: center;
      padding: 9.5px 45px 9.5px 25px;
      height: 100px;
      border-bottom: 1px solid #ddd;
      position: relative;
      .iconfontThree {
        top: 10px;
        font-size: 48px;
      }
      .content {
        font-size: 35px;
        margin-left: 20px;
      }
    }
  }
}
</style>